<script setup>
import btnModule from "../../components/index/btnModule.vue";
import { httpRequest } from "../../utils/http";
import { ref } from "vue";
import { onLoad, onUnload, onShow } from "@dcloudio/uni-app";
const seeding = ref(1);
const name = ref("");
const poi = ref(3);
const index = ref(0);
const broadCast = ref(0);
const VFX = ref(1);
const message = "前往配置素材";
const randomLabel = ref("");
const topic = ref("");
const ai = ref("");

onShow(() => {
  if (uni.getStorageSync("ai")) {
    ai.value = uni.getStorageSync("ai");
  }
  if (uni.getStorageSync("topic")) {
    topic.value = uni.getStorageSync("topic").map((e) => "#" + e.labelName);
    uni.setStorageSync("label", topic.value.join(""));
  }
});
const task = ref("");
onLoad((e) => {
  console.log(e);
  if (e.video) {
    task.value = JSON.parse(e.video);
    console.log(task.value);
    name.value = task.value.taskName;
  }
  index.value = e.index;
  getLabel();
});
onUnload(() => {
  console.log("页面卸载");
  uni.removeStorageSync("topic");
  uni.removeStorageSync("poi");
  uni.removeStorageSync("label");
  uni.removeStorageSync("ai");
});
const getLabel = async () => {
  const shopContent = uni.getStorageSync("shop")[index.value];
  const ores = await httpRequest("/api/labelRad", "POST", {
    shopCate2Id: shopContent.shopCate2Obj.shopCate2Id,
  });
  console.log(ores);
  randomLabel.value = ores.data[0].labelName;
};
const broadCastChange = (e) => {
  broadCast.value = Number(e.detail.value);
};
const VFXChange = (e) => {
  VFX.value = Number(e.detail.value);
};
const seedingChange = (e) => {
  console.log(e);
  seeding.value = Number(e.detail.value);
};

const poiChange = (e) => {
  poi.value = e.detail.value;
  uni.setStorageSync("poi", poi.value);
};
const gotoTopic = () => {
  if (task.value) return;
  uni.navigateTo({ url: `/pageA/index/topic?index=${index.value}` });
};
const goIP = () => {
  if (!name.value.trim())
    return uni.showToast({ title: "任务名称不能为空", icon: "none" });
  if (poi.value === 3) return uni.showToast({ title: "请选择是否挂载poi", icon: "none" });
  if (!uni.getStorageSync("label")) uni.setStorageSync("label", "#" + randomLabel.value);
  uni.setStorageSync("name", name.value);
  uni.setStorageSync("seeding", seeding.value);
  uni.setStorageSync("broadCast", broadCast.value);
  if (seeding.value == 1) {
    //智能AI
    uni.navigateTo({
      url: `/pageA/index/IP?index=${index.value}&seeding=${seeding.value}`,
    });
  } else if (seeding.value == 0 && broadCast.value == 1) {
    //人声
    uni.removeStorageSync("ai");
    uni.navigateTo({
      url: `/pageA/index/IP?index=${index.value}&broadCast=${broadCast.value}`,
    });
  } else {
    uni.navigateTo({ url: `/pageA/index/IP?index=${index.value}&only=1` });
  }
};
const goDub = () => {
  if (task.value) return;
  uni.navigateTo({ url: "/pageA/index/Dub" });
};
const delQuest = async () => {
  await httpRequest("/api/delTask", "POST", { taskId: task.value.id });
  uni.showToast({ title: "删除成功", icon: "none" });
  uni.navigateBack({ delta: 1 });
};
const lookVideo = () => {
  uni.navigateTo({ url: `/pageA/index/preview?id=${task.value.id}` });
};
</script>

<template>
  <view class="page">
    <view class="name">
      <text>任务名称</text>
      <input
        :disabled="task.taskName"
        v-model="name"
        style="text-align: right"
        type="text"
        maxlength="16"
        placeholder="请输入任务名称"
      />
    </view>
    <view class="box">
      <view style="padding: 30rpx; box-sizing: border-box; height: 108rpx">
        <text class="top-text">视频设置</text>
      </view>
      <view class="middle" @click="gotoTopic()">
        <text>视频话题</text>
        <view style="display: flex; align-items: center">
          <text class="label-name" v-if="task">{{ task.label }}</text>
          <text class="label-name" v-else>{{
            topic.length ? topic.join("") : "默认匹配"
          }}</text>

          <image
            style="width: 38rpx; height: 38rpx; vertical-align: middle"
            src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/home_fanhui.png"
            mode="scaleToFill"
          />
        </view>
      </view>
      <view class="bottom">
        <text>挂载POI</text>
        <radio-group @change="poiChange">
          <label>
            <radio
              :disabled="task"
              :checked="task ? task.poi : false"
              color="rgba(142,84,244,1)"
              value="0"
            />本门店
            <radio
              :disabled="task"
              :checked="task ? !task.poi : false"
              style="margin-left: 30rpx"
              color="rgba(142,84,244,1)"
              value="1"
            />不挂载
          </label>
        </radio-group>
      </view>
    </view>
    <view class="craft">
      <view style="padding: 30rpx; box-sizing: border-box; height: 108rpx">
        <text class="top-text" style="font-weight: 700">合成设置</text>
      </view>
      <view class="type">
        <view style="margin-bottom: 24rpx">口播类型</view>
        <view>
          <radio-group
            @change="seedingChange"
            style="display: flex; justify-content: space-between"
          >
            <view class="item" :class="{ active: Number(task.musicType) }" v-if="task">
              <label>
                <view
                  style="
                    display: flex;
                    justify-content: space-between;
                    font-size: 32rpx;
                    color: rgb(48, 49, 51);
                  "
                >
                  <text>智能口播</text>
                  <radio
                    :disabled="task"
                    :checked="task ? Number(task.musicType) : true"
                    value="1"
                    color="rgba(142,84,244,1)"
                  />
                </view>

                <text
                  style="
                    color: rgba(144, 147, 153, 1);
                    font-size: 24rpx;
                    margin-top: 24rpx;
                  "
                  >AI智能人声，自动识别口播内容，生成声音</text
                >
              </label>
            </view>
            <view class="item" :class="{ active: seeding }" v-else>
              <label>
                <view
                  style="
                    display: flex;
                    justify-content: space-between;
                    font-size: 32rpx;
                    color: rgb(48, 49, 51);
                  "
                >
                  <text>智能口播</text>
                  <radio
                    :disabled="task"
                    :checked="task ? Number(task.musicType) : true"
                    value="1"
                    color="rgba(142,84,244,1)"
                  />
                </view>

                <text
                  style="
                    color: rgba(144, 147, 153, 1);
                    font-size: 24rpx;
                    margin-top: 24rpx;
                  "
                  >AI智能人声，自动识别口播内容，生成声音</text
                >
              </label>
            </view>
            <view class="item" :class="{ active: !Number(task.musicType) }" v-if="task">
              <label>
                <view
                  style="
                    display: flex;
                    justify-content: space-between;
                    font-size: 32rpx;
                    color: rgb(48, 49, 51);
                  "
                >
                  <text>个性口播</text>
                  <radio
                    :disabled="task"
                    :checked="task ? !Number(task.musicType) : false"
                    value="0"
                    color="rgba(142,84,244,1)"
                  />
                </view>

                <text
                  style="
                    color: rgba(144, 147, 153, 1);
                    font-size: 24rpx;
                    margin-top: 24rpx;
                  "
                  >真人原声，根据语音自动生成口播内容</text
                >
              </label>
            </view>
            <view class="item" :class="{ active: !seeding }" v-else>
              <label>
                <view
                  style="
                    display: flex;
                    justify-content: space-between;
                    font-size: 32rpx;
                    color: rgb(48, 49, 51);
                  "
                >
                  <text>个性口播</text>
                  <radio
                    :disabled="task"
                    :checked="task ? !Number(task.musicType) : false"
                    value="0"
                    color="rgba(142,84,244,1)"
                  />
                </view>

                <text
                  style="
                    color: rgba(144, 147, 153, 1);
                    font-size: 24rpx;
                    margin-top: 24rpx;
                  "
                  >真人原声，根据语音自动生成口播内容</text
                >
              </label>
            </view>
          </radio-group>
        </view>
      </view>
      <view v-if="task">
        <view
          v-if="!Number(task.musicType)"
          style="
            display: flex;
            justify-content: space-between;
            padding: 30rpx;
            box-sizing: border-box;
            font-size: 32rpx;
            height: 108rpx;
          "
        >
          <text>是否播报</text>
          <radio-group @change="broadCastChange">
            <label>
              <radio
                :disabled="task"
                :checked="task ? task.broadcastSF : false"
                color="rgba(142,84,244,1)"
                value="1"
              />人声播报
              <radio
                :disabled="task"
                :checked="task ? !task.broadcastSF : true"
                style="margin-left: 30rpx"
                color="rgba(142,84,244,1)"
                value="0"
              />只用字幕
            </label>
          </radio-group>
        </view>
        <view
          @click="goDub"
          v-else
          style="
            display: flex;
            justify-content: space-between;
            padding: 30rpx;
            box-sizing: border-box;
            font-size: 32rpx;
            height: 108rpx;
          "
        >
          <text>口播音色</text>
          <text v-if="task">{{ task.timbre }}</text>
          <text v-else>{{ ai ? "已选择" : "默认" }}</text>
        </view>
        <!-- <view style="display: flex;justify-content: space-between;padding: 30rpx;box-sizing: border-box;font-size: 32rpx;height: 108rpx;">
                <text>智能特效</text>
                <radio-group @change="VFXChange">
				<label>
					<radio color="rgba(142,84,244,1)" value="0" />关闭
					<radio style="margin-left: 30rpx;" color="rgba(142,84,244,1)" value="1" checked="true"/>开启
				</label>
			    </radio-group>
            </view> -->
      </view>
      <view v-else>
        <view
          v-if="!seeding"
          style="
            display: flex;
            justify-content: space-between;
            padding: 30rpx;
            box-sizing: border-box;
            font-size: 32rpx;
            height: 108rpx;
          "
        >
          <text>是否播报</text>
          <radio-group @change="broadCastChange">
            <label>
              <radio
                :disabled="task"
                :checked="task ? task.broadcastSF : false"
                color="rgba(142,84,244,1)"
                value="1"
              />人声播报
              <radio
                :disabled="task"
                :checked="task ? !task.broadcastSF : true"
                style="margin-left: 30rpx"
                color="rgba(142,84,244,1)"
                value="0"
              />只用字幕
            </label>
          </radio-group>
        </view>
        <view
          @click="goDub"
          v-else
          style="
            display: flex;
            justify-content: space-between;
            padding: 30rpx;
            box-sizing: border-box;
            font-size: 32rpx;
            height: 108rpx;
          "
        >
          <text>口播音色</text>
          <text v-if="task">{{ task.timbre }}</text>
          <text v-else>{{ ai ? "已选择" : "默认" }}</text>
        </view>
        <!-- <view style="display: flex;justify-content: space-between;padding: 30rpx;box-sizing: border-box;font-size: 32rpx;height: 108rpx;">
                <text>智能特效</text>
                <radio-group @change="VFXChange">
				<label>
					<radio color="rgba(142,84,244,1)" value="0" />关闭
					<radio style="margin-left: 30rpx;" color="rgba(142,84,244,1)" value="1" checked="true"/>开启
				</label>
			    </radio-group>
            </view> -->
      </view>
    </view>
    <view class="bottom1" v-if="task">
      <button @click="delQuest" class="left">删除任务</button>
      <button @click="lookVideo" class="right">查看视频</button>
    </view>
    <btn-module v-else @customClick="goIP()" :message="message" />
  </view>
</template>

<style lang="scss" scoped>
.page {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgb(246, 248, 251);
  padding-bottom: 200rpx;
  .name {
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    width: 100%;
    height: 108rpx;
    padding: 30rpx;
    background-color: #fff;
    font-size: 32rpx;
    color: rgb(48, 49, 51);
    margin-bottom: 24rpx;
  }
  .box {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    margin-bottom: 24rpx;
    .top-text {
      font-size: 32rpx;
      font-weight: 700;
      width: 100%;
      height: 100%;
    }
    .middle {
      flex: 1;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 32rpx;
      padding: 30rpx;
      .label-name {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        max-width: 300rpx;
        display: inline-block;
        font-size: 28rpx;
        color: rgba(144, 147, 153, 1);
      }
    }
    .bottom {
      flex: 1;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 32rpx;
      padding: 30rpx;
    }
  }
  .craft {
    background-color: #fff;
    .type {
      box-sizing: border-box;
      height: 316rpx;
      padding: 24rpx 30rpx;
      .item {
        box-sizing: border-box;
        width: 334rpx;
        height: 196rpx;
        padding: 30rpx 24rpx;
        border-radius: 16rpx;
        border: 2rpx solid rgb(220, 223, 230);
      }
    }
  }
  .bottom1 {
    position: fixed;
    bottom: 0;
    left: 0;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    width: 100%;
    height: 166rpx;
    padding: 10rpx 30rpx 0;
    background-color: #fff;
    .left {
      width: 336rpx;
      height: 88rpx;
      text-align: center;
      line-height: 88rpx;
      background-color: #fff;
      color: rgb(255, 55, 71);
      border: 2rpx solid rgb(255, 55, 71);
      border-radius: 8rpx;
      font-size: 32rpx;
    }
    .right {
      width: 336rpx;
      height: 88rpx;
      text-align: center;
      line-height: 88rpx;
      color: #fff;
      background-color: rgb(142, 84, 244);
      border-radius: 8rpx;
      font-size: 32rpx;
      margin-left: 18rpx;
    }
  }
}
.active {
  border: 2rpx solid rgb(142, 84, 244) !important;
}
</style>
